<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>
            <span class="reduce">-</span>
            <input type="text" value="1">
            <span class="add">+</span>
            <span>123</span>
            <span>123</span>
            <strong>
                <span class="del">x</span>
            </strong>
        </li>
        <li>
            <span class="reduce">-</span>
            <input type="text" value="2">
            <span class="add">+</span>
        </li>
    </ul>

    <script>

        var oUl = document.querySelector('ul');
        var oAdds = oUl.querySelectorAll('.add');
        var oDels = oUl.querySelectorAll('.del');

        // 数量加
        for (var i = 0; i < oAdds.length; i++) {
            oAdds[i].onclick = function () {
                // 测试
                // 数量自增
                this.previousElementSibling.value++;
                // 小计也要变化  
                this.nextElementSibling.nextElementSibling.innerHTML = this.previousElementSibling.value * this.nextElementSibling.innerHTML;
            }
        }


        // 删除
        for (var i = 0; i < oDels.length; i++) {
            oDels[i].onclick = function () {
                this.parentElement.parentElement.remove()
            }
        }

    </script>

</body>

</html>